<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-05-21 11:14:16
 * @Descripttion: 
--> 
<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item v-show="userType != 5 & userType != 1" label="企业名称">
        <el-input v-model="formInline.user" placeholder="请输入企业名称"></el-input>
      </el-form-item>
      <el-form-item label="申报年度">
        <el-date-picker v-model="formInline.dateYear" type="year" placeholder="请选择年份" value-format="yyyy"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmit">搜 索</el-button>
        <el-button @click="resetForm" size="mini">清 除</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="companyName" label="企业名单" width="150">
      </el-table-column>
      <el-table-column fixed prop="declareYear" label="申报年度" width="120">
      </el-table-column>
      <el-table-column prop="january" label="一月份" width="120">
      </el-table-column>
      <el-table-column prop="february" label="二月份" width="120">
      </el-table-column>
      <el-table-column prop="march" label="三月份" width="120">
      </el-table-column>
      <el-table-column prop="april" label="四月份" width="120">
      </el-table-column>
      <el-table-column prop="may" label="五月份" width="120">
      </el-table-column>
      <el-table-column prop="june" label="六月份" width="120">
      </el-table-column>
      <el-table-column prop="july" label="七月份" width="120">
      </el-table-column>
      <el-table-column prop="august" label="八月份" width="120">
      </el-table-column>
      <el-table-column prop="september" label="九月份" width="120">
      </el-table-column>
      <el-table-column prop="october" label="十月份" width="120">
      </el-table-column>
      <el-table-column prop="november" label="十一月份" width="120">
      </el-table-column>
      <el-table-column prop="december" label="十二月份" width="120">
      </el-table-column>
      <el-table-column prop="updateDate" label="填报时间" width="200">
        <template slot-scope="scope">                    
          <span v-if="scope.row.status == 0"></span>
          <span v-if="scope.row.status == 1">{{scope.row.updateDate}}</span>              
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template slot-scope="scope">                    
          <span v-if="scope.row.status == 0" style='color:red'>！未填报</span>
          <span v-if="scope.row.status == 1">已完成</span>     
          <span v-if="scope.row.status == 2">已过期</span>            
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button v-if="scope.row.look == true" type="text" size="small">提醒</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total= this.tableTotal
    ></el-pagination>
    <el-dialog title="年度申报" :visible.sync="dialogTableVisible" width="20%">
      <el-table :data="gridData" height="250" border style="width: 100%">
        <el-table-column prop="date" label="月份"></el-table-column>
        <el-table-column prop="number" label="数据"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
  import { apiGetDeclareYear } from "../../../api/longtermsalesplan/declareYear";
  import { parseTime } from "@/utils/index"

  export default {
    data() {
      return {
        userInfo: null,
        userType: null,
        gridData: [],
        dialogTableVisible: false,
        tableData: [],
        tableTotal: 0,
        pageIndex: 1,
        pageSize: 10,
        formInline: {
          user: '',
          dateYear: ''
        }
      }
    },
    created() {
      this.userInfo = this.$store.state.user.user
      this.userType = this.$store.state.user.user.userType
      this.getDeclareYear()
    },
    methods: {
      getDeclareYear(){
        let paramObj = { 
          deptExtName: this.formInline.user, 
          declareYear: this.formInline.dateYear, 
          page: this.pageIndex,
          size: this.pageSize }
        apiGetDeclareYear(paramObj)
        .then(res => {
          let dataList = res.content;
          let newDataList = [];
          if (dataList.length > 0) {
            dataList.forEach(element => {
              newDataList.push({ 
                companyName: element.deptExt == null ? '' : element.deptExt.name,
                declareYear: element.declareYear,
                january: element.january,
                february: element.february,
                march: element.march,
                april: element.april,
                may: element.may,
                june: element.june,
                july: element.july,
                august: element.august,
                september: element.september,
                october: element.october,
                november: element.november,
                december: element.december,
                createDate: element.createTime,
                updateDate: parseTime(element.updateTime,'{y}-{m}-{d} {h}:{m}:{s}'),
                status: element.status
              });
            });
          }
          this.tableData = newDataList;
          this.tableTotal = res.totalElements;
        })
        .catch(error => {
          console.log(error);
        });
      },
      onSubmit() {
        this.getDeclareYear()
      },
      resetForm(){
        this.formInline.user = '';
        this.formInline.dateYear = '';
      },
      handleClick(row) {
        let newGridData = [];
        let i = 0;
        let j = 0;
        for (const key in row) {
            if(i > 1 && j < 12){
              newGridData.push({date:this.motchSwitch(key), number:row[key]})
              j++;
            }
            i++;
        }
        this.gridData = newGridData;
        this.dialogTableVisible = true;
      },
      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
      },
      motchSwitch(strMotch){
        switch (strMotch) {
          case 'january':
            return '一月份'
            break;
          case 'february':
            return '二月份'
            break;
          case 'march':
            return '三月份'
            break;
          case 'april':
            return '四月份'
            break;
          case 'may':
            return '五月份'
            break;
          case 'june':
            return '六月份'
            break;
          case 'july':
            return '七月份'
            break;
          case 'august':
            return '八月份'
            break;
          case 'september':
            return '九月份'
            break;
          case 'october':
            return '十月份'
            break;
          case 'november':
            return '十一月份'
            break;
          case 'december':
            return '十二月份'
            break;
        }
      }
    }
  }
</script>